<template>
  <div id="toolsSelect">
    <header>
      <i @click="goBack()"></i>
      <div>工具选择</div>
      <router-link to='/docOrder?user=doctor' class="">
        <img src="../../../image/tab_home_normal.png" style="width: 20px;
            height: 20px; margin-right: 10px;">
      </router-link>

    </header>
    <div class="marks" v-if="showMarks">
      <div class="allTime" @click.stop='showMarks=false'>
        <div @click.stop='showMarks=false' style="height:0.2rem;">
          <i style="background: #000;
                  width:0.15rem;
                  height: 1px;
                  position: absolute;
                  transform: rotate(135deg);
                  top: 0.1rem;
                  right: 0.05rem;"></i>
          <i style="background: #000;
              transform: rotate(45deg);
              width:0.15rem;
              height: 1px;
              position: absolute;
              top: 0.1rem;
              right: 0.05rem;"></i>
        </div>
        <ul class="ltip">
          <li v-for='(item,index) in goodslist' :key="index">
            <div class="sc-goods-list-one last">
              <label class="sc-goods-label">
                <input type="checkbox" class="sc-goods-checkbox" checked disabled />
                <span class="sc-normal" style="margin-top:7px"></span>
                <span style="margin-left:15px">{{item.name}}</span>
                <span style="color:#e5322d">￥{{item.price}}</span>
                <span class="sc-goods-number" @click.stop=delGoods(item.cid)>x</span>
                <!-- <span class="sc-goods-number">×{{item.num}}</span> -->
              </label>
            </div>
          </li>
          <li>
            <div class="sc-goods-list-one last">
              <label class="sc-goods-label">
                <input type="checkbox" class="sc-goods-checkbox" checked disabled />
                <span class="sc-normal" style="margin-top:7px"></span>
                <span style="margin-left:15px">就诊时段价钱</span>
                <span style="color:#e5322d">￥{{price}}</span>
              </label>
            </div>
          </li>
          <li>
            <div v-if="type">
              <div class="sc-goods-list-one last">
                <label class="sc-goods-label">
                  <input type="checkbox" class="sc-goods-checkbox" checked disabled />
                  <span class="sc-normal" style="margin-top:7px"></span>
                  <span style="margin-left:15px">技术指导费</span>
                  <span style="color:#e5322d">￥200</span>
                </label>
              </div>
            </div>
          </li>
          <!-- <li>
              <div class="sc-goods-list-one last">
                <label class="sc-goods-label">
                  <input type="checkbox" class="sc-goods-checkbox" checked disabled />
                  <span class="sc-normal" style="margin-top:7px"></span>
                  <span style="margin-left:15px">基础设施服务费</span>
                  <span style="color:#e5322d">￥50</span>
                </label>
              </div>
          </li> -->
        </ul>
      </div>
    </div>
    <section>
      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" style="width:38%">
        <el-submenu v-for="(item,index) in categoryList" :index="index+''" :key="index">
          <span slot="title" style="letter-spacing:0.01rem;" @click=changeTab(item.id)>{{item.name}}</span>
          <el-submenu v-for="(item,index) in item.childItems" :index="item.id+''" :key="index">
            <span slot="title" style="letter-spacing: 0.01rem;" @click=changeTab(item.id)>{{item.name}}</span>
            <el-menu-item index="item.id+''" style="letter-spacing: 0.01rem;" v-for="(item,index) in item.childItems"
              @click=changeTab(item.id)>
              <span slot="title">{{item.name}} </span>
            </el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
      <ul class="right">
        <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
          <li v-for='(item,index) in list' :key='index' v-if="list.length>0" @click="details(item.des)">
            <a>
              <img :src="item.img_url" width='69' height="88" alt="">
              <div>
                <h3>
                  {{item.name}}
                </h3>
                <div>
                  <span>{{item.price}}{{item.unit==undefined||item.unit==''?'':'/'}}{{item.unit}}</span>
                  <div @click.stop="addCarts(item)">
                    <img src="../../../image/icon_shopping_cart@2x.png" width='22' alt="" />
                  </div>
                </div>
                <!-- <div>库存：{{item.reserve}}</div> -->
              </div>
            </a>
          </li>
        </Loadmore>
      </ul>
    </section>
    <div class="tankuang" v-if="show" @click="show=false">
      <i style="background: #000;
            width:0.12rem;
            height: 1px;
            position: absolute;
            transform: rotate(135deg);
            top: 0.08rem;
            right: 0.03rem;"></i>
      <i style="background: #000;
        transform: rotate(45deg);
        width:0.12rem;
        height: 1px;
        position: absolute;
        top: 0.08rem;
        right: 0.03rem;"></i>
      {{content}}
    </div>
    <footer>
      <div class="cart" @click=chaxun()>
        <img src="../../../image/icon_shopping_cart@2x.png" width='30' alt="">
        <i v-if="total.num">{{total.num}}</i>
      </div>
      <div class='allPrice'>
        <span>合计:</span>
        <i>{{total.price}}</i>
      </div>
      <a @click='goOrder'>确认下单</a>
    </footer>
  </div>
</template>
<script>
  import {
    Loadmore,
    MessageBox
  } from 'mint-ui';

  export default {
    data() {
      return {
        goods: '', //所有商品
        goodsPrice:'',
        price: 0,
        guide: 0,
        showMarks: false,
        show: false,
        content: '',
        list: [],
        goodslist: [],
        gender: [], //获取购物车价钱
        sentPage: {
          page: 1, //分页累加
        }, //接口入参
        totalNum: 0, //总数据条数
        bottomPullText: "", //上拉提示信息
        allLoaded: false, //分页数据是否已经加载完毕
        categoryList: [

        ], //左侧分类列表 
        currentCategory: '',
        total: {
          num: 0,
          price: 0,
        }, //总计数量和价格
        docinfo: '', //上一步医生填写的信息 
        clinicid: '', //医生选择的诊室id
        docOrderId: '',


        obj: {
          infoObj: {
            name: '',
            project: '',
            remarks: '',
          }, //患者的预约信息
          doctorid: localStorage.getItem("loginMobile"),
          clinicid: '',
          docinfo: '',
          gids: '',
          old_order_num: '',
          total_price: '',
          per_price: '',
        },


        type_sub: '',
        type: false,
      }
    },
    components: {
      Loadmore
    },
    methods: {
      //返回上一级
      goBack() {
        this.$router.back();
      },
      // 获取左侧类目
      getCategory() {
        this.$api.get(this.$api.baseURLSchool, "selecttreedata/view_join_category?name=诊室", {}, r => {
          if (r.data.ret == 1) {
            console.log(r.data.info)
            this.categoryList = r.data.info;
            this.currentCategory = r.data.info[0].id;
            this.getList(this.sentPage, this.currentCategory);
          }
        }, err => {
          console.log(err);
        })
      },

      // 获取右侧商品列表
      getList(params, currentCategory) {
        this.allLoaded = false;
        currentCategory = String(currentCategory)
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/goods/0?type=" + currentCategory, params, r => {
          this.totalNum = r.data.records; //总数据
          if (this.sentPage.page == 1) {
            this.list = r.data.rows;
          } else {
            this.list = this.list.concat(r.data.rows);
          }
          if (r.data.rows.length == 0 && this.sentPage.page > 1) {
            this.$utils._toast("暂无更多数据");
          }
        }, err => {
          console.log(err);
        })
      },
      // 确认下单
      goOrder() {
        MessageBox.confirm('已核对,确定下单?').then(action => {
          this.id = JSON.parse(localStorage.getItem('blid'));
          this.pid = localStorage.getItem('pid');
          this.obj.old_order_num = this.$route.query.order_num
          this.obj.per_price = JSON.stringify(this.$route.query.per_price)
          if (this.id) {
            this.$api.get(this.$api.baseURLSchool, "select_cid/patient/" + this.pid, {}, r => {
              if (r.data.ret == 1) {
                this.obj.infoObj.name = r.data.info.name;
              }
            }, err => {
              console.log(err);
            })
            this.$api.get(this.$api.baseURLSchool, "select_cid/appointment/" + this.id, {}, r => {
              if (r.data.ret == 1) {
                this.obj.infoObj.project = r.data.info.project;
                this.obj.infoObj.remarks = r.data.info.remarks;
                if (this.total.num == 0) {
                  this.$utils._toast("请选择商品");
                } else {
                  this.obj.infoObj = JSON.stringify(this.obj.infoObj);
                  this.obj.gids = JSON.stringify(this.goodslist);
                  this.obj.total_price = this.total.price
                  this.submitOrder(this.obj);
                }
              }
            }, err => {
              console.log(err);
            })
          } else {
            if (this.total.num == 0) {
              this.$utils._toast("请选择商品");
            } else {
              this.obj.gids = JSON.stringify(this.goodslist);
              this.obj.infoObj = this.$route.query.infoObj;
              this.obj.total_price = this.total.price;
              this.submitOrder(this.obj);
            }
          }

        }, r => {

        });

      },
      // 提交订单
      submitOrder(obj) {
        if (this.old_orderid) {
          this.$api.post(this.$api.baseURLSchool, "origin_add_order", obj, r => {
            if (r.data.ret == 1) { //提交订单成功
              //提交后删除购物车
              this.delGoods1(this.goodslist);
              // 去支付
              if (this.$route.query.docOrderId) {
                this.$utils._toast('加单完成，详情请前往加单列表查看!');
              } else {
                if (this.obj.total_price == 0) {
                  this.$utils._toast('下单成功');
                  return;
                } else {
                  this.goPay(r.data.order_num);
                }
              }
            }
          }, err => {
            console.log(err);
          })
        } else {
          this.obj.startdate = JSON.parse(obj.docinfo).startdate
          this.obj.chairid = JSON.parse(obj.docinfo).chairid
          this.obj.time_arr = JSON.stringify(JSON.parse(obj.docinfo).select_timeArr)
          this.$api.post(this.$api.baseURLSchool, "update_doctor_order/add", obj, r => {
            // console.log('852369',r.data)
            if (r.data.ret == 1) { //提交订单成功
              this.delGoods1(this.goodslist);
              // 去支付
              if (this.$route.query.docOrderId) {
                this.$utils._toast('加单完成，详情请前往加单列表查看!');
              } else {

                if (this.obj.total_price == 0) {
                  this.$utils._toast('下单成功');
                  return;
                } else {
                  this.goPay(r.data.order_num);
                }
              }
            }
          }, err => {
            console.log(err);
          })
        }


      },
      // 支付宝支付
      goPay(order_num) {
        let data = {
          order_num: order_num,
          subject: this.list[0].name,
          amount: this.total.price,
        };

        this.$api.post(this.$api.baseURL2, "alipay", data, r => {
          window.location.href = r.data.url;
        }, err => {
          console.log(err);
        }, false, false)
      },


      //获取购物车的列表
      getCartsData() {
        if (this.type == false) {
          if (this.$route.query.docinfo == undefined) {} else {
            this.price = JSON.parse(this.$route.query.docinfo).price1;
          }
          this.obj.doctorid = localStorage.getItem("loginMobile");
          this.total.price = Number(this.price)
        } else {
          if (this.$route.query.docinfo == undefined) {} else {
            this.price = JSON.parse(this.$route.query.docinfo).price1;
          }
          this.obj.doctorid = localStorage.getItem("loginMobile");
          this.total.price = Number(this.price) + Number(this.guide)
        }

        this.$api.get(this.$api.baseURLSchool, "selectdata2/view_goods_tools_cart?uid=" + this.obj.doctorid, {}, r => {
          if (r.data.ret == 1) {
            this.goodslist = r.data.info;
            this.total.num = r.data.info.length
            this.goodslist.forEach((item, index) => {
            //   if (item.price == '免费') {
            //     const price = 0;
            //   } else {
            //     const price = parseFloat(item.price);
            //   }
              this.total.price += Number(price);
            });
          } else if (r.data.ret == 0) {
            this.goodslist = r.data.info;
            this.total.num = r.data.info.length
          }
        }, err => {
          console.log(err);
        })
      },
      // 获取用户下单信息
      init() {
        this.type_sub = localStorage.getItem("type_sub");
        if (this.type_sub == '"doctor0"') {
          if (this.$route.query.docOrderId) {
            this.type = false
          } else {
            this.type = true
            this.guide = 0;
          }
        } else {
          this.type = false
        }
        this.docinfo = this.$route.query.docinfo;
        this.clinicid = this.$route.query.clinicid;
        // this.docOrderId = this.$route.query.docOrderId;
        this.obj.docinfo = this.docinfo;
        this.obj.clinicid = this.clinicid;
        this.old_orderid = this.$route.query.docOrderId;
      },
      //查询购物车列表   
      chaxun() {
        this.showMarks = true;
        this.getCartsData();
      },
      //查看详情
      details(gtype) {
        this.content = gtype
        this.show = true;
      },
      handleOpen(key, keyPath) {},
      handleClose(key, keyPath) {},

      // 加入购物车
      addCarts(item) {
        //   console.log(JSON.parse(this.docinfo).select_timeArr.length)
        const obj = {
          gid: item.id,
          num: 1,
          uid: localStorage.getItem("loginMobile"),
        };
        this.$api.post(this.$api.baseURLSchool, "dataupdate/tools_carts/add", obj, r => {
          if (r.data.ret == 1) {
            if (item.price == '免费') {
                this.goodsPrice = 0;
            } else {
                this.goodsPrice = parseFloat(item.price);
            }
            this.total.num += 1;
            this.total.price += price;
            console.log(this.goodsPrice)
            this.getCartsData()
          } else {
            this.$utils._toast('添加失败');
          }
        }, err => {
          console.log(err);
        })
      },
      // 删除购物车中商品
      delGoods(data) {
        const params = {
          id: data
        }
        this.$api.post(this.$api.baseURLSchool, "dataupdate/tools_carts/del", params, r => {
          if (r.data.ret == 1) { //删除成功 更新购物车表
            this.getCartsData();
          }
        }, err => {
          console.log(err);
        })
      },

      delGoods1(data) {
        data.forEach((item, index) => {
          const params = {
            id: item.cid
          }
          this.$api.post(this.$api.baseURLSchool, "dataupdate/tools_carts/del", params, r => {

            if (r.data.ret == 1) { //删除成功 更新购物车表
              this.getCartsData();
            }
          }, err => {
            console.log(err);
          })
        });
      },

      //左侧选项卡点击事件
      changeTab(i, type) {
        this.currentCategory = i;
        this.sentPage.page = 1;
        this.getList(this.sentPage, this.currentCategory);
      },

      //上拉加载
      loadBottom() {
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getList(this.sentPage, this.currentCategory);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      }

    },
    created() {
      this.getCartsData();
      this.init();
      this.getCategory();
    },

  }

</script>
<style lang="scss" scoped>
  #toolsSelect section ul.left {
    width: 65px;

    li {
      font-size: 14px;
      /* height:100px; */
    }
  }

  .tankuang {
    width: 2.9rem;
    padding: 12px;
    display: flex;
    overflow: auto;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    min-height: 1rem;
    border-radius: 8px;
    font-family: '楷体';
    background: linear-gradient(to bottom, #fff, 70%, #d3d1d1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .mc {
    padding: 40px 0;

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
    }
  }

  .el-menu {
    overflow: auto;
  }

  .el-submenu .el-menu-item {
    min-width: 140px;
  }


  .el-icon-arrow-down:before {
    content: ""
  }

  #toolsSelect section ul.right li a>div>div {
    padding-top: 7px;
  }

  .el-submenu .el-submenu__icon-arrow {
    display: none;
  }

  .el-submenu .el-icon-arrow-down {
    display: none;
  }

</style>
